﻿@using Microsoft.AspNetCore.Mvc.Razor
@model SpecificationAttributeOptionModel

<div asp-validation-summary="All"></div>
<input asp-for="Id" type="hidden"/>
<input asp-for="SpecificationAttributeId" type="hidden"/>
@{
    if (string.IsNullOrEmpty(Model.ColorSquaresRgb))
    {
        Model.ColorSquaresRgb = "#FFFFFF";
    }
}

<script>

    $("#@Html.IdFor(model => model.EnableColorSquaresRgb)").click(toggleEnableColorSquaresRgb);
    toggleEnableColorSquaresRgb();


function toggleEnableColorSquaresRgb() {
    if ($('#@Html.IdFor(model => model.EnableColorSquaresRgb)').is(':checked')) {
        $('#pnlColorSquaresRgb').show();
    } else {
        $('#pnlColorSquaresRgb').hide();
    }
}
</script>
<vc:admin-widget widget-zone="specification_attribute_option_details_top" additional-data="null"/>

@{
    Func<int, HelperResult>
        template = @<div class="form-body">
            <div class="form-group">
                <admin-label asp-for="@Model.Locales[item].Name" class="col-sm-3"/>
                <div class="col-md-9 col-sm-9">
                    <admin-input asp-for="@Model.Locales[item].Name"/>
                    <span asp-validation-for="@Model.Locales[item].Name"></span>
                </div>
            </div>
            <input asp-for="@Model.Locales[item].LanguageId" type="hidden"/>
        </div>;
}
<div class="form-horizontal">
    <localized-editor localized-template="@template" name="specificationattribute-localized" language-ids="@Model.Locales.Select(c => c.LanguageId).ToList()">
        <div class="form-body">
            <div class="form-group">
                <admin-label asp-for="Name" class="col-sm-3"/>
                <div class="col-md-9 col-sm-9">
                    <admin-input asp-for="Name"/>
                    <span asp-validation-for="Name"></span>
                </div>
            </div>
        </div>
    </localized-editor>
    <div class="form-body">
        <div class="form-body">
            <div class="form-group">
                <admin-label asp-for="SeName"/>
                <div class="col-md-9 col-sm-9">
                    <admin-input asp-for="SeName"/>
                    <span asp-validation-for="SeName"></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <admin-label asp-for="EnableColorSquaresRgb" class="col-sm-3"/>
            <div class="col-md-9 col-sm-9">
                <label class="mt-checkbox mt-checkbox-outline control control-checkbox">
                    <admin-input asp-for="EnableColorSquaresRgb"/>
                    <div class="control__indicator"></div>
                </label>
                <span asp-validation-for="EnableColorSquaresRgb"></span>
            </div>
        </div>
        <div class="form-group" id="pnlColorSquaresRgb">
            <admin-label asp-for="ColorSquaresRgb" class="col-sm-3"/>
            <div class="col-md-9 col-sm-9">
                <admin-input asp-for="ColorSquaresRgb"/>
                <div id="color-picker"></div>
                <script>
                    $('#color-picker').farbtastic('#@Html.IdFor(model => model.ColorSquaresRgb)');
                </script>
                <span asp-validation-for="ColorSquaresRgb"></span>
            </div>
        </div>
        <div class="form-group">
            <admin-label asp-for="DisplayOrder" class="col-sm-3"/>
            <div class="col-md-9 col-sm-9">
                <admin-input asp-for="DisplayOrder"/>
                <span asp-validation-for="DisplayOrder"></span>
            </div>
        </div>
        <div class="form-group">
            <div class="offset-sm-3 offset-md-3 col-md-9 col-sm-9">
                <button class="btn btn-success" type="submit" name="save">
                    <i class="fa fa-check"></i>@Loc["Admin.Common.Save"]
                </button>
                <vc:admin-widget widget-zone="specification_attribute_option_details_buttons" additional-data="null"/>
            </div>
        </div>
    </div>
</div>
<vc:admin-widget widget-zone="specification_attribute_option_details_bottom" additional-data="Model"/>